<template>
  <div>
    <div class="comparsion_report">
      <el-button class="report_export" type="primary" size="medium" @click="getPdf()">导出</el-button>

      <div class="comparsion_container" id="pdfDom">
        <div class="report_title">
          <span>课堂观察：对比分析报告</span>
        </div>

        <!-- 课堂信息 -->
        <div class="class_info">
          <div class="class_title">
            <span>一、课堂信息</span>
          </div>

          <table class="report-class-table">
            <tr>
              <th>对比项目</th>
              <th>课程一</th>
              <th>课程二</th>
            </tr>
            <tr>
              <td>采样时间</td>
              <td>{{ courseData.course_info.course_time }}</td>
              <td>{{ contrastData.course_info.course_time }}</td>
            </tr>
            <tr>
              <td>课程名称</td>
              <td>{{ courseData.course_info.course_name }}</td>
              <td>{{ contrastData.course_info.course_name }}</td>
            </tr>
            <tr>
              <td>科目</td>
              <td>{{ courseData.course_info.subject_name }}</td>
              <td>{{ contrastData.course_info.subject_name }}</td>
            </tr>
            <tr>
              <td>主讲人</td>
              <td>{{ courseData.course_info.teacher_name }}</td>
              <td>{{ contrastData.course_info.teacher_name }}</td>
            </tr>
            <tr>
              <td>年级</td>
              <td>{{ courseData.course_info.grade_name }}</td>
              <td>{{ contrastData.course_info.grade_name }}</td>
            </tr>
            <tr>
              <td>班级</td>
              <td>{{ courseData.course_info.class_name }}</td>
              <td>{{ contrastData.course_info.class_name }}</td>
            </tr>
          </table>
        </div>

        <!-- 教学行为对比 -->
        <div class="class_action_comparision">
          <div class="class_title">
            <span>二、教学行为对比</span>
          </div>

          <!-- 教师行为 -->
          <table class="action-compare-table">
            <tr class="action-compare-tr">
              <td colspan="5">
                <RadarChart :origin-data="originTeaIndicatorValue" :contras-data="constrastTeaIndicatorValue" :indicator="teacherIndicator" id="RadarChart" width="100%" height="420px" />
              </td>
            </tr>
            <tr>
              <th>对比课程/教师行为</th>
              <th>讲授时长占比</th>
              <th>互动时长占比</th>
              <th>指导时长占比</th>
              <th>板书时长占比</th>
            </tr>
            <tr>
              <td class="compare-item">{{ courseData.course_info.course_name }}</td>
              <td>{{ courseData.watch_dimension.teacher_behavior_count.teach_rate }}</td>
              <td>{{ courseData.watch_dimension.teacher_behavior_count.interaction_rate }}</td>
              <td>{{ courseData.watch_dimension.teacher_behavior_count.guidance_rate }}</td>
              <td>{{ courseData.watch_dimension.teacher_behavior_count.blackboard_rate }}</td>
            </tr>
            <tr>
              <td class="compare-item">{{ contrastData.course_info.course_name }}</td>
              <td>{{ contrastData.watch_dimension.teacher_behavior_count.teach_rate }}</td>
              <td>{{ contrastData.watch_dimension.teacher_behavior_count.interaction_rate }}</td>
              <td>{{ contrastData.watch_dimension.teacher_behavior_count.guidance_rate }}</td>
              <td>{{ contrastData.watch_dimension.teacher_behavior_count.blackboard_rate }}</td>
            </tr>
          </table>

          <!-- 学生行为 -->
          <table class="action-compare-table">
            <tr class="action-compare-tr">
              <td colspan="5">
                <RadarChart :origin-data="originStuIndicatorValue" :contras-data="constrastStuIndicatorValue" :indicator="stuIndicator" id="radarStuChart" width="100%" height="420px" />
              </td>
            </tr>
            <tr>
              <th>对比课程/学生行为</th>
              <th>听课时长占比</th>
              <th>实践时长占比</th>
              <th>阅读时长占比</th>
              <th>讨论时长占比</th>
            </tr>
            <tr>
              <td class="compare-item">{{ courseData.course_info.course_name }}</td>
              <td>{{ courseData.watch_dimension.student_behavior_count.listen_rate }}</td>
              <td>{{ courseData.watch_dimension.student_behavior_count.practice_rate }}</td>
              <td>{{ courseData.watch_dimension.student_behavior_count.read_rate }}</td>
              <td>{{ courseData.watch_dimension.student_behavior_count.discuss_rate }}</td>
            </tr>
            <tr>
              <td class="compare-item">{{ contrastData.course_info.course_name }}</td>
              <td>{{ contrastData.watch_dimension.student_behavior_count.listen_rate }}</td>
              <td>{{ contrastData.watch_dimension.student_behavior_count.practice_rate }}</td>
              <td>{{ contrastData.watch_dimension.student_behavior_count.read_rate }}</td>
              <td>{{ contrastData.watch_dimension.student_behavior_count.discuss_rate }}</td>
            </tr>
          </table>

          <!-- 次数对比 -->
          <table class="action-compare-table count-compare-table">
            <tr>
              <th></th>
              <th class="compare-item" colspan="4">{{ courseData.course_info.course_name }}</th>
              <th class="compare-item" colspan="4">{{ contrastData.course_info.course_name }}</th>
            </tr>
            <tr>
              <td class="vertical-rl">平均课堂参与度</td>
              <td colspan="4">{{ courseData.class_participation }}</td>
              <td colspan="4">{{ contrastData.class_participation }}</td>
            </tr>

            <!-- 学生动作行为次数 -->
            <tr>
              <td rowspan="6" class="vertical-rl">学生动作行为次数</td>
              <td colspan="2">抬头次数</td>
              <td colspan="2">举手次数</td>
              <td colspan="2">抬头次数</td>
              <td colspan="2">举手次数</td>
            </tr>
            <tr>
              <td colspan="2">{{ courseData.student_actions.listening_count }}次</td>
              <td colspan="2">{{ courseData.student_actions.practice_count }}次</td>
              <td colspan="2">{{ contrastData.student_actions.listening_count }}次</td>
              <td colspan="2">{{ contrastData.student_actions.practice_count }}次</td>
            </tr>
            <tr>
              <td colspan="2">站立次数</td>
              <td colspan="2">趴桌次数</td>
              <td colspan="2">站立次数</td>
              <td colspan="2">趴桌次数</td>
            </tr>
            <tr>
              <td colspan="2">{{ courseData.student_actions.demonstrate_count }}次</td>
              <td colspan="2">{{ courseData.student_actions.read_count }}次</td>
              <td colspan="2">{{ contrastData.student_actions.demonstrate_count }}次</td>
              <td colspan="2">{{ contrastData.student_actions.read_count }}次</td>
            </tr>
            <tr>
              <td colspan="4">回头次数</td>
              <td colspan="4">回头次数</td>
            </tr>
            <tr>
              <td colspan="4">{{ courseData.student_actions.discuss_count }}次</td>
              <td colspan="4">{{ contrastData.student_actions.discuss_count }}次</td>
            </tr>

            <!-- 学生表情变化次数 -->
            <tr>
              <td class="vertical-rl">学生表情变化次数</td>
              <td colspan="4">
                <div class="action_box">
                  <div class="action_count emo_next_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/surprise.png" alt="" />
                      <span>惊喜</span>
                    </div>
                    <span class="expression_count">{{ courseData.student_expressions.surprise }}次</span>
                  </div>

                  <div class="action_count emo_next_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/sad.png" alt="" />
                      <span> 悲伤</span>
                    </div>
                    <span class="expression_count">{{ courseData.student_expressions.happy }}次</span>
                  </div>

                  <div class="action_count emo_next_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/neutral.png" alt="" />
                      <span>中性</span>
                    </div>
                    <span class="expression_count">{{ courseData.student_expressions.neutral }}次</span>
                  </div>

                  <div class="action_count emo_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/happy.png" alt="" />
                      <span>快乐</span>
                    </div>
                    <span class="expression_count">{{ courseData.student_expressions.sad }}次</span>
                  </div>

                  <div class="action_count emo_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/anger.png" alt="" />
                      <span>愤怒</span>
                    </div>
                    <span class="expression_count">{{ courseData.student_expressions.anger }}次</span>
                  </div>

                  <div class="action_count emo_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/detest.png" alt="" />
                      <span>厌恶</span>
                    </div>
                    <span class="expression_count">{{ courseData.student_expressions.detest }}次</span>
                  </div>

                  <div class="action_count emo_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/fear.png" alt="" />
                      <span>恐惧</span>
                    </div>
                    <span class="expression_count">{{ courseData.student_expressions.fear }}次</span>
                  </div>
                </div>
              </td>
              <td colspan="4">
                <div class="action_box">
                  <div class="action_count emo_next_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/surprise.png" alt="" />
                      <span>惊喜</span>
                    </div>
                    <span class="expression_count">{{ contrastData.student_expressions.surprise }}次</span>
                  </div>

                  <div class="action_count emo_next_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/happy.png" alt="" />
                      <span>快乐</span>
                    </div>
                    <span class="expression_count">{{ contrastData.student_expressions.happy }}次</span>
                  </div>

                  <div class="action_count emo_next_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/neutral.png" alt="" />
                      <span>中性</span>
                    </div>
                    <span class="expression_count">{{ contrastData.student_expressions.neutral }}次</span>
                  </div>

                  <div class="action_count emo_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/sad.png" alt="" />
                      <span>悲伤</span>
                    </div>
                    <span class="expression_count">{{ contrastData.student_expressions.sad }}次</span>
                  </div>

                  <div class="action_count emo_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/anger.png" alt="" />
                      <span>愤怒</span>
                    </div>
                    <span class="expression_count">{{ contrastData.student_expressions.anger }}次</span>
                  </div>

                  <div class="action_count emo_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/detest.png" alt="" />
                      <span>厌恶</span>
                    </div>
                    <span class="expression_count">{{ contrastData.student_expressions.detest }}次</span>
                  </div>

                  <div class="action_count emo_count">
                    <div class="expression_box">
                      <img src="../../../assets/images/ai/fear.png" alt="" />
                      <span>恐惧</span>
                    </div>
                    <span class="expression_count">{{ contrastData.student_expressions.fear }}次</span>
                  </div>
                </div>
              </td>
            </tr>

            <!-- 学生行为分布 -->
            <tr>
              <td class="vertical-rl">学生行为分布</td>
              <td colspan="4">
                <Behavior
                  :line-style="{
                    backgroundColor: '#000',
                    bottom: '33px',
                    width: '85%',
                    marginLeft: '45px'
                  }"
                  height="300px"
                  width="100%"
                  :option="originStuBehaviorData"
                />
              </td>
              <td colspan="4">
                <Behavior
                  :line-style="{
                    backgroundColor: '#000',
                    bottom: '33px',
                    width: '85%',
                    marginLeft: '45px'
                  }"
                  height="300px"
                  width="100%"
                  :option="contarstStuBehaviorData"
                />
              </td>
            </tr>

            <!-- 教师教学行为分布 -->
            <tr>
              <td rowspan="2" class="vertical-rl">教师教学行为分布</td>
              <td colspan="4">
                <Behavior
                  :line-style="{
                    backgroundColor: '#000',
                    bottom: '33px',
                    width: '80%',
                    marginLeft: '65px'
                  }"
                  height="300px"
                  :option="originTeacherBehaviorData"
                />
              </td>
              <td colspan="4">
                <Behavior
                  :line-style="{
                    backgroundColor: '#000',
                    bottom: '33px',
                    width: '80%',
                    marginLeft: '65px'
                  }"
                  height="300px"
                  :option="contarstTeacherBehaviorData"
                />
              </td>
            </tr>

            <tr>
              <td>{{ formatTime(courseData.teacher_behavior.teaching_behavior_duration.teach_duration) }}分钟 <br />讲授时长</td>
              <td>{{ formatTime(courseData.teacher_behavior.teaching_behavior_duration.interaction_duration) }}分钟 <br />互动时长</td>
              <td>{{ formatTime(courseData.teacher_behavior.teaching_behavior_duration.guidance_duration) }}分钟 <br />指导时长</td>
              <td>{{ formatTime(courseData.teacher_behavior.teaching_behavior_duration.blackboard_duration) }}分钟 <br />板书时长</td>
              <td>{{ formatTime(contrastData.teacher_behavior.teaching_behavior_duration.teach_duration) }}分钟 <br />讲授时长</td>
              <td>{{ formatTime(contrastData.teacher_behavior.teaching_behavior_duration.interaction_duration) }}分钟 <br />互动时长</td>
              <td>{{ formatTime(contrastData.teacher_behavior.teaching_behavior_duration.guidance_duration) }}分钟 <br />指导时长</td>
              <td>{{ formatTime(contrastData.teacher_behavior.teaching_behavior_duration.blackboard_duration) }}分钟 <br />板书时长</td>
            </tr>

            <!-- 教育行为轨迹分布 -->
            <tr>
              <td rowspan="2" class="vertical-rl">教育行为轨迹分布</td>
              <td colspan="4">
                <Scatter class="trajectory" :scatter-data="originScatterData" id="comparisionScatter" width="240px" height="135px" color="#CCD2FF" />
              </td>
              <td colspan="4">
                <Scatter class="trajectory" :scatter-data="contrastScatterData" id="comparisionScatter1" width="240px" height="135px" color="#CCD2FF" />
              </td>
            </tr>

            <tr>
              <td colspan="4">
                <div class="teacher_trajectory">
                  <span>12.5分钟 <br />讲台时长</span>
                  <span>12.5分钟 <br />巡视时长</span>
                  <span>9次 <br />巡视次数</span>
                </div>
              </td>
              <td colspan="4">
                <div class="teacher_trajectory">
                  <span>12.5分钟 <br />讲台时长</span>
                  <span>12.5分钟 <br />巡视时长</span>
                  <span>9次 <br />巡视次数</span>
                </div>
              </td>
            </tr>
          </table>
        </div>

        <!-- 三、结构式课堂观察记录 -->
        <div class="class_structure_container">
          <div class="class_title">
            <span>三、结构式课堂观察记录</span>
          </div>

          <table class="record_class_table">
            <tr class="first-floor-th">
              <th class="bgc_b">对比项</th>
              <th>{{ courseData.course_info.course_name }}</th>
              <th>{{ contrastData.course_info.course_name }}</th>
            </tr>
            <tr>
              <td class="bgc_b">观察时间</td>
              <td>{{ courseData.course_info.course_time }}</td>
              <td>{{ contrastData.course_info.course_time }}</td>
            </tr>
            <tr>
              <td class="bgc_b">观察者</td>
              <td>教学AI数据分析系统</td>
              <td>教学AI数据分析系统</td>
            </tr>
            <tr>
              <td class="bgc_b">课程时长</td>
              <td>{{ formatTime(courseData.course_info.video_time) }}分钟</td>
              <td>{{ formatTime(contrastData.course_info.video_time) }}</td>
            </tr>

            <tr>
              <td>学生课堂结构</td>
              <td colspan="3">
                <!-- 情绪 -->
                <LineChart
                  :legend-color="['#FFA669', '#3158FF']"
                  :xAxisData="xAxisEmoData"
                  title="学生情绪对比"
                  class="stu_structure"
                  :y-axis-text="emoYAxisText"
                  :contrast-data="contrastEmoData"
                  :origin-data="originEmoData"
                  id="comparisionReportLine"
                  width="700px"
                  text-color="#000"
                  :y-max="6"
                />

                <!-- 专注度 -->
                <LineChart
                  :legend-color="['#61D8D8', '#D378B7']"
                  :y-max="100"
                  title="学生专注度对比"
                  class="stu_structure"
                  :xAxisData="xAxisAttenData"
                  :y-axis-text="attenYAxisText"
                  :origin-data="attentionOriginData"
                  :contrast-data="attentionContrastData"
                  id="comparisionAttenReportLine"
                  width="700px"
                  text-color="#000"
                />
              </td>
            </tr>

            <tr>
              <td rowspan="2" class="teaching-model">教学模型</td>
              <td colspan="3">
                <StChart
                  :x-max="xMax"
                  :y-max="yMax"
                  :contras-data="contrastSTData"
                  :origin-data="originSTData"
                  :x-data="st_x_data"
                  class="stu_structure"
                  title="S - T 模型"
                  id="reportSt"
                  x-axis-name="(T%)"
                  y-axis-name="(S%)"
                  width="700px"
                  height="600px"
                  text-color="#000"
                />

                <ChChart
                  :origin-point="originPoint"
                  :contras-point="contrasPoint"
                  class="stu_structure"
                  title="RT - CH 模型"
                  id="reportCh"
                  width="700px"
                  line-color="#3D89DE"
                  height="400px"
                  x-axis-name="(RT%)"
                  y-axis-name="(CH%)"
                  text-color="#000"
                />
                <div class="mix-style">
                  <span class="a_r_tit">RT - CH 模型标准模式</span>
                  <table>
                    <tr>
                      <th>教学模式</th>
                      <th>练习型</th>
                      <th>混合型</th>
                      <th>对话型</th>
                      <th>讲授型</th>
                    </tr>
                    <tr>
                      <td>判断标准</td>
                      <td>Rt &le;0.3</td>
                      <td>Rt &ge;0.7</td>
                      <td>Ch &ge;0.4</td>
                      <td>0.3 &lt;Rt&le; 0.7,Ch&lt;0.4</td>
                    </tr>
                  </table>
                </div>

                <div>
                  <span class="a_r_tit">教学模型对比结果</span>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <div class="model_comparision">
                  <div class="class_name">课堂一</div>
                  <div class="model_constainer">
                    <div class="model_box">
                      <div class="box_left">
                        <div class="box_text">
                          <span>学生行为</span> <span class="stu_percentage">{{ courseData.time_allocation.student_time_per }}</span>
                        </div>
                        <div class="box_text teacher_text">
                          <span>教师行为</span> <span class="teacher_percentage">{{ courseData.time_allocation.teacher_time_per }}</span>
                        </div>
                      </div>
                      <div>
                        <ReportPie :pie-data="courseData.time_allocation" id="comparisionReportPie" width="140px" height="100%" />
                      </div>
                    </div>
                    <div class="model_type">
                      <span class="type_text">{{ formatType(courseData.suggest.rt_ch_type) }}</span>
                      <span>课堂类型</span>
                    </div>
                    <div class="model_suggest">
                      <div>
                        课堂一类型：<span class="type_box">{{ formatType(courseData.suggest.rt_ch_type) }}课堂</span>
                      </div>
                      <span class="sug_text"> {{ courseData.time_allocation.allocation_summarize }} </span>
                    </div>
                  </div>
                </div>

                <div class="model_comparision">
                  <div class="class_name">课堂二</div>
                  <div class="model_constainer">
                    <div class="model_box">
                      <div class="box_left">
                        <div class="box_text">
                          <span>学生行为</span> <span class="stu_percentage">{{ contrastData.time_allocation.student_time_per }}</span>
                        </div>
                        <div class="box_text teacher_text">
                          <span>教师行为</span> <span class="teacher_percentage">{{ contrastData.time_allocation.teacher_time_per }}</span>
                        </div>
                      </div>
                      <div>
                        <ReportPie :pie-data="contrastData.time_allocation" id="comparisionStuReportPie" width="140px" height="100%" />
                      </div>
                    </div>
                    <div class="model_type">
                      <span class="type_text">{{ formatType(contrastData.suggest.rt_ch_type) }}</span>
                      <span>课堂类型</span>
                    </div>
                    <div class="model_suggest">
                      <div>
                        课堂一类型：<span class="type_box">{{ formatType(contrastData.suggest.rt_ch_type) }}课堂</span>
                      </div>
                      <span class="sug_text"> {{ contrastData.time_allocation.allocation_summarize }} </span>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr class="class_result">
              <td class="class-type-tit">课堂对比分析结论</td>
              <td class="summary" colspan="3">
                <template>
                  <!-- <el-input type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请输入结论" v-model="suggestion" maxlength="500">
                </el-input> -->
                  <p class="hide-p4">结论：{{ comparsion_text }}</p>
                  <span class="numberWord">
                    <i>{{ lengthFormat(comparsion_text) }}</i>
                    <i>/500</i>
                  </span>
                </template>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import RadarChart from "../echart/radar.vue";
import Behavior from "../echart/behavior.vue";
import Scatter from "../echart/scatter.vue";
import LineChart from "../echart/line.vue";
import StChart from "../echart/st.vue";
import ChChart from "../echart/ch.vue";
import ReportPie from "../echart/report-pie.vue";

const attenYAxisText = ["未学习", "未集中", "未听讲", "走神", "中性", "集中", "专注"];
const emoYAxisText = ["恐惧", "厌恶", "愤怒", "快乐", "中性", "悲伤", "惊喜"];

// 情绪
const originEmoData = {
  name: "课堂一",
  data: [],
  type: "line",
  symbol: "none",
  lineStyle: {
    color: "rgba(49, 122, 255, 1)",
    width: 2
  },

  areaStyle: {
    // 区域填充样式
    normal: {
      // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "rgba(49, 122, 255, 1)" },
          { offset: 1, color: "rgba(159, 88, 255, 0)" }
        ],
        false
      )
    }
  }
};

const contrastEmoData = {
  name: "课堂二",
  data: [],
  type: "line",
  symbol: "none",
  lineStyle: {
    color: "rgba(255, 212, 105, 1)",
    width: 2
  },

  areaStyle: {
    // 区域填充样式
    normal: {
      // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "rgba(255, 212, 105, 1)" },
          { offset: 1, color: "rgba(236, 198, 101, 0)" }
        ],
        false
      )
    }
  }
};

// 专注度
const attentionOriginData = {
  name: "课堂一",
  data: [],
  type: "line",
  symbol: "none",
  lineStyle: {
    color: "#71D1CF",
    width: 2
  },

  areaStyle: {
    // 区域填充样式
    normal: {
      // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "rgba(49, 255, 233, 1)" },
          { offset: 1, color: "rgba(159, 88, 255, 0)" }
        ],
        false
      )
    }
  }
};

const attentionContrastData = {
  name: "课堂二",
  data: [],
  type: "line",
  symbol: "none",
  lineStyle: {
    color: "#D378B7",
    width: 2
  },

  areaStyle: {
    // 区域填充样式
    normal: {
      // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "rgba(211, 120, 183, 1)" },
          { offset: 1, color: "rgba(255, 166, 105, 0)" }
        ],
        false
      )
    }
  }
};

const enumRadar = {
  BLACKBOARD: "blackboard_duration",
  GUIDANCE: "guidance_duration",
  INTERACTION: "interaction_duration",
  TEACH: "teach_duration"
};

const enumStuAction = {
  1: "讨论时长",
  3: "阅读时长",
  5: "演示时长",
  7: "实践时长",
  9: "听讲时长"
};

const enumStuActionKey = {
  1: "discuss",
  3: "read",
  5: "demonstrate",
  7: "practice",
  9: "listen"
};

const enumTeaAction = {
  1: "教室巡视",
  3: "师生互动",
  5: "书写板书",
  7: "指导学生",
  9: "教师讲授"
};
const enumTeaActionKey = {
  1: "tour",
  3: "interaction",
  5: "blackboard",
  7: "guidance",
  9: "teach"
};

export default {
  components: {
    RadarChart,
    Behavior,
    Scatter,
    LineChart,
    StChart,
    ChChart,

    ReportPie
  },
  data() {
    return {
      htmlTitle: null,
      xMax: 0,
      yMax: 0,
      originSTData: {},
      originPoint: {},
      contrasPoint: {},
      emoYAxisText,
      maxXAis: [],
      attenYAxisText,
      courseData: {},
      contrastData: {},
      originTeacherBehaviorData: {}, //教师行为数据
      contarstTeacherBehaviorData: {}, // 对比教师行为数据
      originStuBehaviorData: {}, //学生行为数据
      contarstStuBehaviorData: {}, // 对比学生行为数据
      originScatterData: [], // 教师轨迹
      contrastScatterData: [], // 对比教师轨迹
      originTeaIndicatorValue: [], // 教师行为雷达
      constrastTeaIndicatorValue: [], // 对比教师行为雷达
      originStuIndicatorValue: [], // 学生行为雷达
      constrastStuIndicatorValue: [], // 对比学生行为雷达
      stuIndicator: [], // 学生雷达数据
      teacherIndicator: [], // 教师雷数据
      xAxisEmoData: [], // 学生情绪x轴
      originEmoData, // 学生情绪
      contrastEmoData, // 对比学生情绪
      xAxisAttenData: [], //学生专注x轴
      attentionOriginData, //专注
      attentionContrastData, //对比专注
      contrastSTData: {},
      comparsion_text: "" // 对比结果
    };
  },
  computed: {
    formatTimeHours() {
      return (seconds) => {
        if (seconds !== "undefined") {
          let hours = Math.floor(seconds / 3600);
          let minutes = Math.floor((seconds % 3600) / 60);
          let remainingSeconds = seconds % 60;

          // 添加前导零
          hours = hours < 10 ? "0" + hours : hours;
          minutes = minutes < 10 ? "0" + minutes : minutes;
          remainingSeconds = remainingSeconds < 10 ? "0" + remainingSeconds : remainingSeconds;

          return hours + ":" + minutes + ":" + remainingSeconds;
        } else {
          return "00:00:00";
        }
      };
    },
    lengthFormat() {
      return (value) => {
        return String(value).length;
      };
    },

    // 格式化秒为分钟
    formatTime() {
      return (value) => {
        const minutes = value / 60;
        const formattedMinutes = minutes.toFixed(2);
        const roundedMinutes = Math.ceil(formattedMinutes * 100) / 100;
        return roundedMinutes;
      };
    },

    formatType() {
      return (value) => {
        let text = "";
        switch (value) {
          case "1":
            text = "讲授型";
            break;
          case "2":
            text = "练习型";
            break;
          case "3":
            text = "对话型";
            break;
          case "4":
            text = "混合型";
            break;
        }

        return text;
      };
    }
  },
  methods: {
    init() {
      this.getCourse();
      this.getComparision();
      this.handleBehavior();
      this.handleTrajectory();
      this.handleIndicator();
      this.handleEmo();
      this.handleAttention();
      this.handleSTData();
      this.handleRTCH();
    },

    handleExport() {
      this.htmlToPDf({
        element: document.getElementById("pdfDom"),
        footer: document.getElementById("footer"),
        header: document.getElementById("header")
      });
    },
    getCourse() {
      const courseData = JSON.parse(localStorage.getItem("courseData"));
      const contrastData = JSON.parse(localStorage.getItem("comparisionData"));

      this.courseData = courseData;
      this.contrastData = contrastData;
      console.info(this.courseData.course_info.course_name);
    },

    // 处理行为
    handleBehavior() {
      const { courseData, contrastData } = this;
      this.transTeacherBehaviorData(courseData, "originTeacherBehaviorData");
      this.transTeacherBehaviorData(contrastData, "contarstTeacherBehaviorData");

      this.transStuBehaviorData(courseData, "originStuBehaviorData");
      this.transStuBehaviorData(contrastData, "contarstStuBehaviorData");
    },

    // 处理轨迹
    handleTrajectory() {
      const { courseData, contrastData } = this;
      this.transTrajectoryData(courseData, "originScatterData");
      this.transTrajectoryData(contrastData, "contrastScatterData");
    },

    // 处理雷达图
    handleIndicator() {
      this.handleTeacherIndicator();
      this.handleStuIndicator();
    },

    // 教师雷达
    handleTeacherIndicator() {
      const { courseData, contrastData } = this;
      const originValue = this.transTeacherIndicator(courseData, "originTeaIndicatorValue");
      const contrastValue = this.transTeacherIndicator(contrastData, "constrastTeaIndicatorValue");

      const _value = deep_clone(originValue).concat(deep_clone(contrastValue));
      const maxVal = Math.max.apply(null, _value) == 0 ? 100 : Math.max.apply(null, _value); //雷达图最大值

      this.teacherIndicator = [
        {
          text: "板书时长",
          max: maxVal
        },
        {
          text: "指导时长",
          max: maxVal
        },
        {
          text: "讲授时长",
          max: maxVal
        },
        {
          text: "互动时长",
          max: maxVal
        }
      ];
    },

    // 学生雷达
    handleStuIndicator() {
      const { courseData, contrastData } = this;
      const originValue = this.transStuIndicator(courseData, "originStuIndicatorValue");
      const contrastValue = this.transStuIndicator(contrastData, "constrastStuIndicatorValue");

      const _value = deep_clone(originValue).concat(deep_clone(contrastValue));
      const maxVal = Math.max.apply(null, _value) == 0 ? 100 : Math.max.apply(null, _value); //雷达图最大值

      this.stuIndicator = [
        {
          text: "讨论时长",
          max: maxVal
        },
        {
          text: "听课时长",
          max: maxVal
        },
        {
          text: "实践时长",
          max: maxVal
        },
        {
          text: "阅读时长",
          max: maxVal
        }
      ];
    },

    // 处理学生情绪
    handleEmo() {
      const { courseData, contrastData } = this;
      this.transStuEmoData(courseData, "originEmoData");
      this.transStuEmoData(contrastData, "contrastEmoData");
      console.info(this.originEmoData);
    },

    // 处理专注
    handleAttention() {
      const { courseData, contrastData } = this;
      this.transStuAttention(courseData, "attentionOriginData");
      this.transStuAttention(contrastData, "attentionContrastData");
    },

    // 处理st
    handleSTData() {
      const { courseData, contrastData } = this;
      this.transStData(contrastData.st_value, "contrastSTData");
      this.transStData(courseData.st_value, "originSTData");
    },

    // 处理rt-ch图
    handleRTCH() {
      const { courseData, contrastData } = this;
      this.transRTChData(courseData, "originPoint", "#08fcff");
      this.transRTChData(contrastData, "contrasPoint", "#FEA900");
    },

    // 转换rt-ch数据
    transRTChData(object, key, color) {
      const originPoint = {
        type: "effectScatter",
        symbolSize: 8,
        data: [],
        color: color
      };
      const rtData = [];
      const { rt_ch_value } = object;
      for (const key in rt_ch_value) {
        rtData.push(rt_ch_value[key]);
      }
      originPoint.data.push(rtData);

      this[key] = originPoint;
    },

    // 转换st数据
    transStData(object, key) {
      const originSTData = {
        name: key === "originSTData" ? "课堂1" : "课堂2",
        type: "line",
        step: "end",
        lineStyle: {
          color: key === "originSTData" ? "#FFD402" : "#3DE2FF"
        },
        itemStyle: {
          color: key === "originSTData" ? "#FFD402" : "rgb(33,148,246)",
          borderWidth: 1,
          borderColor: key === "originSTData" ? "#FFD402" : "#3DE2FF"
        },
        data: object.y
      };
      this.st_x_data = object.x;
      this[key] = originSTData;
      this.xMax = object.x[object.x.length - 1];
      this.yMax = object.y[object.y.length - 1];
    },

    // 转换 教师行为分析数据
    transTeacherBehaviorData(object, key) {
      const { teaching_behavior } = object.teacher_behavior;
      const keys = ["tour", "interaction", "blackboard", "guidance", "teach"];
      const yAxisText = ["教室巡视", "", "师生互动", "", "书写板书", "", "指导学生", "", "教师讲授"];
      const dataValue = [];
      const infoData = object.teacher_behavior.teaching_behavior_source || {};

      this.setJsonData("tour", "interaction", "blackboard", "guidance", "teach", infoData, teaching_behavior);

      for (let i = 0; i < 9; i += 2) {
        for (let j = 0; j < teaching_behavior[keys[i / 2]].length; j++) {
          const key = keys[i / 2];
          const value = parseInt(teaching_behavior[key][j]) ? i + 1 : 0;
          dataValue.push([i, j, value]);
        }
      }

      const minuteXaxis = [];

      for (let i = 1; i < object.course_info.video_time; i++) {
        minuteXaxis.push(i);
      }

      const data = dataValue.map((item) => [item[1], item[0], item[2] || "-"]);

      this[key] = {
        tooltip: {
          show: true,
          formatter: (obj) => {
            const hoverItem = infoData[enumTeaActionKey[obj.data[2]]].find((item) => {
              if (item.Start < obj.data[0] && obj.data[0] < item.End) {
                return item;
              }
            });
            // 后端数据返回分间隔但是又是连续的 需要特殊处理

            if (hoverItem) {
              return `${enumTeaAction[obj.data[2]]}: ${this.formatTimeHours(hoverItem.End - hoverItem.Start)}`;
            } else {
              return "";
            }
          }
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: minuteXaxis,
          splitArea: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#D7DBE0",
              borderType: [5, 10],
              borderDashOffset: 5
            }
          },
          axisLabel: {
            fontSize: 12,
            color: "#000",
            margin: 20,
            interval: parseInt(object.course_info.video_time / 5),
            formatter: (value) => {
              return `${this.formatTimeHours(value)}`;
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: yAxisText,
          splitArea: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#000"
            }
          },
          axisTick: {
            show: false
          }
        },
        visualMap: {
          type: "piecewise",
          hoverLink: false,
          min: 0,
          max: 10,
          orient: "horizontal",
          itemGap: 0,
          precision: 2,
          padding: 5,
          borderWidth: 1,
          borderColor: "none",

          show: false,
          pieces: [
            {
              gt: 0,
              lte: 1,
              color: "#cbe21a"
            },
            {
              gt: 1,
              lte: 3,
              color: "#15c136"
            },
            {
              gt: 3,
              lte: 5,
              color: "#6849ff"
            },
            {
              gt: 5,
              lte: 7,
              color: "#16c9ba"
            },
            {
              gt: 7,
              lte: 9,
              color: "#1978e5"
            }
          ],
          outOfRange: {
            color: "#999"
          }
        },
        series: [
          {
            name: "拥堵指数",
            type: "heatmap",
            data: data,
            label: {
              show: false
            },

            itemStyle: {
              borderWidth: 0,
              borderColor: "#FFFFFF"
            },

            emphasis: {
              itemStyle: {
                shadowOffsetY: 2,
                shadowBlur: 6,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    },

    // 封装获取的数据
    setJsonData(name1, name2, name3, name4, name5, infoData, teaching_behavior) {
      teaching_behavior[name5] = [];
      infoData[name5].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name5][i] = "1";
        }
      });

      // 实践 guidance
      teaching_behavior[name4] = [];
      infoData[name4].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name4][i] = "1";
        }
      });

      // 演示 blackboard
      teaching_behavior[name3] = [];
      infoData[name3].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name3][i] = "1";
        }
      });

      // 阅读 interaction
      teaching_behavior[name2] = [];
      infoData[name2].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name2][i] = "1";
        }
      });

      // 讨论 tour
      teaching_behavior[name1] = [];
      infoData[name1].forEach((item) => {
        for (let i = Number(item.Start) == Number(item.End) ? Number(item.Start) - 1 : Number(item.Start); i < Number(item.End); i++) {
          teaching_behavior[name1][i] = "1";
        }
      });
      let num1 = teaching_behavior[name5].length;
      let num2 = teaching_behavior[name4].length;
      let num3 = teaching_behavior[name3].length;
      let num4 = teaching_behavior[name2].length;
      let num5 = teaching_behavior[name1].length;
      let max = num1;
      if (num2 > max) {
        max = num2;
      }

      if (num3 > max) {
        max = num3;
      }

      if (num4 > max) {
        max = num4;
      }

      if (num5 > max) {
        max = num5;
      }
      if (max > num1 && num1 != 0) {
        for (let i = teaching_behavior[name5].length; i < max; i++) {
          teaching_behavior[name5][i] = "0";
        }
      }
      if (max > num2 && num2 != 0) {
        for (let i = teaching_behavior[name4].length; i < max; i++) {
          teaching_behavior[name4][i] = "0";
        }
      }
      if (max > num3 && num3 != 0) {
        for (let i = teaching_behavior[name3].length; i < max; i++) {
          teaching_behavior[name3][i] = "0";
        }
      }
      if (max > num4 && num4 != 0) {
        for (let i = teaching_behavior[name2].length; i < max; i++) {
          teaching_behavior[name2][i] = "0";
        }
      }
      if (max > num5 && num5 != 0) {
        for (let i = teaching_behavior[name1].length; i < max; i++) {
          teaching_behavior[name1][i] = "0";
        }
      }
    },

    // 全部是否连续
    handleContinuous(dataObj) {
      const continuousData = {};
      for (const key in dataObj) {
        let sum = 0;
        for (let i = 0; i < dataObj[key].length; i++) {
          if (dataObj[key][i + 1] && (dataObj[key][i].End === dataObj[key][i + 1].Start || dataObj[key][i].End === dataObj[key][i + 1].Start - 1)) {
            sum += dataObj[key][i].End - dataObj[key][i].Start;
            continuousData[key] = sum;
          } else if (!dataObj[key][i + 1]) {
          } else {
            break;
          }
        }
      }

      return continuousData;
    },

    // 转换 学生行为分析数据
    transStuBehaviorData(object, key) {
      const { studying_behavior } = object.student_behavior;
      const keys = ["discuss", "read", "demonstrate", "practice", "listen"];
      const yAxisText = ["讨论", "", "阅读", "", "演示", "", "实践", "", "听讲"];
      const dataValue = [];

      const infoData = object.student_behavior.studying_behavior_source || {};
      const tooltipData = this.handleContinuous(infoData);
      this.setJsonData("discuss", "read", "demonstrate", "practice", "listen", infoData, studying_behavior);

      for (let i = 0; i < 9; i += 2) {
        for (let j = 0; j < studying_behavior[keys[i / 2]].length; j++) {
          const key = keys[i / 2];
          const value = parseInt(studying_behavior[key][j]) ? i + 1 : 0;
          dataValue.push([i, j, value]);
        }
      }
      const minuteXaxis = [];

      for (let i = 1; i < object.course_info.video_time; i++) {
        minuteXaxis.push(i);
      }

      const data = dataValue.map((item) => [item[1], item[0], item[2] || "-"]);

      this[key] = {
        tooltip: {
          show: true,
          formatter: (obj) => {
            const hoverItem = infoData[enumStuActionKey[obj.data[2]]].find((item) => {
              if (item.Start < obj.data[0] && obj.data[0] < item.End) {
                return item;
              }
            });

            // 后端数据返回分间隔但是又是连续的 需要特殊处理
            if (tooltipData[enumStuActionKey[obj.data[2]]]) {
              return `${enumStuAction[obj.data[2]]}: ${this.formatTimeHours(tooltipData[enumStuActionKey[obj.data[2]]])}`;
            }
            if (hoverItem) {
              return `${enumStuAction[obj.data[2]]}: ${this.formatTimeHours(hoverItem.End - hoverItem.Start)}`;
            } else {
              return "";
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: minuteXaxis,
            splitArea: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#D7DBE0",
                borderType: [5, 10],
                borderDashOffset: 5
              }
            },
            axisLabel: {
              fontSize: 12,
              color: "#000",
              margin: 20,
              interval: parseInt(object.course_info.video_time / 5),
              formatter: (value) => {
                return `${this.formatTimeHours(value)}`;
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "category",
            data: yAxisText,
            splitArea: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#000"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        visualMap: {
          type: "piecewise",
          hoverLink: false,
          min: 0,
          max: 10,
          orient: "horizontal",
          itemGap: 0,
          precision: 2,
          padding: 5,
          borderWidth: 1,
          borderColor: "none",

          show: false,
          pieces: [
            {
              gt: 0,
              lte: 1,
              color: "#cbe21a"
            },
            {
              gt: 1,
              lte: 3,
              color: "#15c136"
            },
            {
              gt: 3,
              lte: 5,
              color: "#6849ff"
            },
            {
              gt: 5,
              lte: 7,
              color: "#16c9ba"
            },
            {
              gt: 7,
              lte: 9,
              color: "#1978e5"
            }
          ],
          outOfRange: {
            color: "#999"
          }
        },
        series: [
          // 不连续柱状图
          {
            name: "拥堵指数",
            type: "heatmap",
            data: data,
            label: {
              show: false
            },

            itemStyle: {
              borderWidth: 0,
              borderColor: "#FFFFFF"
            },

            emphasis: {
              itemStyle: {
                shadowOffsetY: 2,
                shadowBlur: 6,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    },

    //转换 教师行为轨迹数
    transTrajectoryData(object, key) {
      const { teaching_trajectory } = object.teacher_behavior;
      const data = [];

      for (let i = 0; i < teaching_trajectory.x.length; i++) {
        data.push([parseFloat(teaching_trajectory.x[i]), parseFloat(teaching_trajectory.y[i])]);
      }

      this[key] = data;
    },

    // 转换雷达图数据
    transTeacherIndicator(object, valueKey) {
      const { teaching_behavior_duration } = object.teacher_behavior;
      const indicatorData = [0, 0, 0, 0];
      for (const key in teaching_behavior_duration) {
        if (key === enumRadar.BLACKBOARD) {
          indicatorData.splice(0, 1, Number(this.formatTime(teaching_behavior_duration[key])));
        }

        if (key === enumRadar.GUIDANCE) {
          indicatorData.splice(1, 1, Number(this.formatTime(teaching_behavior_duration[key])));
        }
        if (key === enumRadar.TEACH) {
          indicatorData.splice(2, 1, Number(this.formatTime(teaching_behavior_duration[key])));
        }
        if (key === enumRadar.INTERACTION) {
          indicatorData.splice(3, 1, Number(this.formatTime(teaching_behavior_duration[key])));
        }
      }

      this[valueKey] = indicatorData;
      return indicatorData;
    },

    // 转换学生雷达数据
    transStuIndicator(object, valueKey) {
      const data = [];
      const { studying_behavior_duration } = object.student_behavior;

      for (const key in studying_behavior_duration) {
        if (key !== "demonstrate_duration") {
          data.push(Number(this.formatTime(studying_behavior_duration[key])));
        }
      }
      this[valueKey] = data;
      return data;
    },

    // 转换学生情绪数据
    transStuEmoData(object, key) {
      const expressionData = object.student_behavior.expression.expression_value;
      const xAxis = expressionData.map((item, index) => index);
      if (xAxis && xAxis.length > this.maxXAis.length) {
        this.maxXAis = xAxis;
      }
      this[key].data = expressionData;
      this.xAxisEmoData = this.maxXAis;
    },

    // 转换专注度
    transStuAttention(object, key) {
      const attenData = object.student_behavior.show.curve_value;
      const xAxis = attenData.map((item, index) => index);
      if (xAxis && xAxis.length > this.maxXAis.length) {
        this.maxXAis = xAxis;
      }
      this[key].data = attenData;
      this.xAxisAttenData = this.maxXAis;
    },

    // 获取课程结论
    getComparision() {
      const { courseData, contrastData } = this;
      const params = {
        course_id: [courseData.course_info.course_id, contrastData.course_info.course_id]
      };
      const success = (res) => {
        const { status, data, msg } = res;
        if (status === "success") {
          this.comparsion_text = data.analysis_conclusion;
        } else {
          this.$message.error(msg);
        }
      };
      this.$ajax.get("api/ainew/courseInfoContrast", {
        params,
        func: { success }
      });
    }
  },

  created() {
    this.init();
    this.htmlTitle = `课堂观察：对比分析报告`;
  }
};
</script>
<style lang="scss" scoped>
.comparsion_report {
  box-sizing: border-box;
  margin: 50px auto;
  max-width: 1000px;
  background: #fff;

  .bgc_b {
    background-color: #eaf5ff;
    width: 170px !important;
  }
  .report_export {
    margin-top: 42px;
    margin-left: 820px;
  }

  .comparsion_container {
    padding: 50px;

    .report_title {
      line-height: normal;
      font-size: 26px;
      font-weight: bold;
      color: #000;
      text-align: center;
    }

    .class_info {
      margin: 50px 0;

      .report-class-table {
        th:nth-child(1) {
          width: 182px;
          background-color: #eaf5ff;
        }

        th:nth-child(2),
        th:nth-child(3) {
          width: 410px;
          background-color: #eaf5ff;
        }

        td:nth-child(1) {
          background-color: #eaf5ff;
        }
      }
    }

    .class_action_comparision {
      .action-compare-table {
        margin-bottom: 30px;
        .action-compare-tr {
          height: 440px;
        }

        .compare-item {
          background-color: #eaf5ff;
        }

        th {
          width: 150px;
          background-color: #eaf5ff;
        }

        th:nth-child(1) {
          width: 400px;
        }
      }

      .count-compare-table {
        margin-top: 60px;
        width: 100%;
        th {
          background-color: #fff;
        }

        th:nth-child(1) {
          width: 100px;
        }

        tr:nth-child(2) {
          td:not(:nth-child(1)) {
            height: 140px;
            font-weight: 500;
            font-size: 24px;
            color: #000000;
          }
        }

        tr:nth-child(4),
        tr:nth-child(6),
        tr:nth-child(8) {
          td {
            height: 87px;
            font-weight: 500;
            font-size: 24px;
            color: #00a0ff;
          }
        }

        tr:nth-child(3),
        tr:nth-child(5),
        tr:nth-child(7) {
          td {
            background: #f7fbff;
          }
        }

        tr:nth-child(9) {
          td:not(:nth-child(1)) {
            width: 400px;
            height: 400px;

            .action_box {
              display: flex;
              flex-wrap: wrap;
              margin-top: 10px;
              width: 100%;
              height: 70%;

              .action_count {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                width: 33%;
                margin-bottom: 10px;

                .expression_box {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  margin-bottom: 15px;
                  img {
                    width: 25px;
                    height: 25px;
                  }
                  span {
                    margin-top: 15px;
                  }
                }

                .expression_count {
                  font-weight: 500;
                  font-size: 18px;
                  color: #00a0ff;
                }
              }

              .emo_count {
                width: 25%;
                padding-top: 40px;
              }

              .emo_next_count {
                width: 33%;
                border-bottom: 1px dashed #dddddd;
                padding-bottom: 40px;
              }
            }
          }
        }

        tr:nth-child(12) {
          td {
            line-height: 20px;
            height: 65px;
          }
        }

        tr:last-child {
          td {
            .teacher_trajectory {
              display: flex;
              width: 100%;
              height: 100%;
              align-items: center;

              span {
                width: 33%;
                height: 100%;
                line-height: 30px;
              }

              span:nth-child(2) {
                border-right: 1px solid #dddddd;
                border-left: 1px solid #dddddd;
              }
            }
          }
        }
      }
    }

    .class_structure_container {
      margin-top: 60px;

      .record_class_table {
        width: 100% !important;

        .first-floor-th {
          th {
            background-color: #eaf5ff;
          }

          th:nth-child(1) {
            width: 100px;
          }

          th:nth-child(2),
          th:nth-child(3) {
            width: 460px;
          }
        }

        .bgc_b {
          background-color: #eaf5ff;
        }

        .scatter-tit {
          height: 616px;
        }

        .scatter-map-box {
          height: 406px;
        }

        .scatter-data-bx {
          height: 160px;

          th,
          td {
            width: 100px;
          }
        }

        .second-floor-th th:nth-child(1) {
          width: 130px;
        }

        .teaching-model {
          height: 1270px;
        }

        .class-type-tit {
          height: 100px;
          width: 500px;
        }
        .class_result {
          position: relative;

          .summary {
            text-align: start;
            .hide-p4 {
              float: left;
              padding: 20px;
              line-height: 18px;

              &:focus {
                outline: none;
              }
            }

            .numberWord {
              position: absolute;
              right: 5px;
              bottom: 5px;

              i {
                font-size: 12px;
                color: #020202;
              }

              i:nth-child(2) {
                color: #ccc;
              }
            }
          }
        }

        .stu_structure {
          display: flex;
          justify-content: center;
          margin-top: 30px;
        }

        .mix-style {
          margin-bottom: 60px;
          span {
            font-size: 18px;
          }

          table {
            margin: 0 auto;

            th {
              background-color: #eaf5ff;
            }

            th,
            td {
              width: 100px;
            }

            th:nth-child(5),
            td:nth-child(5) {
              width: 230px;
            }
          }
        }

        .model_comparision {
          display: flex;

          .class_name {
            width: 138px;
            border-right: 1px solid #dddddd;
            line-height: 150px;
          }

          .model_constainer {
            display: flex;
            padding: 10px;
            flex: 1;
            justify-content: space-around;

            .model_box {
              display: flex;
              padding: 10px;
              background-color: #f4f4f4;
              border-radius: 5px;
              align-items: center;

              .box_left {
                display: flex;
                flex-direction: column;

                .box_text {
                  display: flex;
                  flex-direction: column;
                  align-items: baseline;

                  span {
                    margin: 5px 0;
                  }

                  .stu_percentage {
                    font-size: 20px;
                    color: #08a8ff;
                    font-weight: bold;
                  }

                  .teacher_percentage {
                    font-size: 20px;
                    color: #08ccff;
                    font-weight: bold;
                  }
                }

                .teacher_text {
                  margin-top: 25px;
                }
              }
            }

            .model_type {
              background-color: #f4f4f4;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              width: 170px;
              border-radius: 5px;

              .type_text {
                font-weight: bold;
                font-size: 18px;
                margin-bottom: 20px;
              }
            }

            .model_suggest {
              display: flex;
              flex-direction: column;
              width: 220px;
              background-color: #f4f4f4;
              border-radius: 5px;
              padding: 20px 10px 5px;
              align-items: start;

              .type_box {
                padding: 5px 10px;
                background-color: #08a8ff;
                border-radius: 5px;
                color: #fff;
              }

              .sug_text {
                line-height: normal;
                margin-top: 20px;
                text-align: start;
              }
            }
          }
        }

        .model_comparision:first-child {
          border-bottom: 1px solid #ddd;
        }
      }

      .record_class_table > tr > th:nth-child(1) {
        width: 120px;
      }

      .record_class_table > tr > th:nth-child(3) {
        width: 200px;
      }

      .record_class_table > tr > th:nth-child(2),
      .record_class_table > tr > th:nth-child(4) {
        width: 340px;
      }

      .record_class_table {
        th,
        td {
          width: 100px;
        }

        .scatter-tit {
          height: 616px;
        }

        .scatter-map-box {
          height: 406px;
        }

        .scatter-data-bx {
          height: 160px;
        }

        .join_table_tr2 {
          color: #d50000;
          font-weight: 600;
        }

        .teaching-model {
          height: 1270px;
        }

        .class-type-tit {
          .summary .el-textarea {
            width: 100%;
          }
        }
      }
      .mix-style {
        span {
          font-size: 18px;
        }

        table {
          margin: 0 auto;
          th {
            background-color: #eaf5ff;
          }

          th,
          td {
            width: 100px;
          }

          th:nth-child(5),
          td:nth-child(5) {
            width: 230px;
          }
        }
      }
    }
  }
}

.class_title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}

th,
td {
  height: 40px;
  text-align: center;
  border: 1px solid #ddd;
}

.a_r_tit {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  line-height: 50px;
}

.vertical-rl {
  writing-mode: vertical-rl;
  text-align: center;
  letter-spacing: 4px;
  background: #fff !important;
}
.trajectory {
  margin-left: 90px;
  background: aliceblue;
}
</style>
